<template>
  <!-- class名字最好和组件名同名 -->
  <div class="App">
    <!-- 使用组件：头部组件 -->
    <HmHeader></HmHeader>
    <!-- 使用组件：主体组件 -->
    <HmMain></HmMain>

    <!-- 使用组件：底部组件 -->
    <HmFooter></HmFooter>
  </div>
</template>


<script>
// 导入组件
import HmHeader from "./components/HmHeader.vue";
import HmMain from "./components/HmMain.vue";
import HmFooter from "./components/HmFooter.vue";
export default {
  components: {
    // 注册组件：注意使用大驼峰命名法  组件名：组件对象 对于同名的可以省略 ：组件对象
    HmHeader,
    HmMain,
    HmFooter,
  },
};
</script>


<style lang="less">
.App {
  width: 500px;
  height: 500px;
  background-color: pink;
}
</style>